<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="企业名称" prop="brandName">
      <el-input v-model="ruleForm.brandName" />
    </el-form-item>
    <el-form-item label="企业法人" prop="legalPerson">
      <el-input v-model="ruleForm.legalPerson" />
    </el-form-item>
    <el-form-item label="注册资本" prop="capital">
      <el-input v-model="ruleForm.capital" />
    </el-form-item>
    <el-form-item label="所属行业" prop="industry">
      <el-input v-model="ruleForm.industry" />
    </el-form-item>
    <el-form-item label="企业位置" prop="address">
      <div class="flex flex-1">
        <el-input
          v-model="ruleForm.address"
          readonly
          placeholder="请点击按钮进行地图选址"
        />
        <el-button type="primary" size="default" @click="drawer = true"
          >地图选址</el-button
        >
      </div>
    </el-form-item>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-form-item label="企业LOGO" prop="brandLogo">
          <img-upload v-model="ruleForm.brandLogo" />
        </el-form-item>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-form-item label="营业执照" prop="lisense">
          <img-upload v-model="ruleForm.lisense" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="企业简介" prop="intro">
      <div class="editor">
        <QuillEditor
          theme="snow"
          v-model:content="ruleForm.intro"
          content-type="html"
        />
      </div>
    </el-form-item>
    <el-form-item label="是否展示" prop="isShow">
      <el-switch
        v-model="ruleForm.isShow"
        inactive-value="2"
        active-value="1"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        确定入驻
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
    </el-form-item>
  </el-form>
  <el-drawer title="地图选址" v-model="drawer" direction="btt" size="70%">
    <GodMap v-model="ruleForm.address"></GodMap>
  </el-drawer>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useCategory } from "../../store/category";
import { CompanyType } from "../../types/job";
import { companyPost } from "../../api/job";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";

import GodMap from "../../components/god-map.vue";
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<Omit<CompanyType, "objectId">>({
  brandName: "万锋互联",
  legalPerson: "赵老师",
  capital: "1000W",
  industry: "IT行业",
  lisense: "",
  brandLogo: "",
  address: "",
  intro: "",
  isShow: "1",
});
const rules = reactive<FormRules<CompanyType>>({
  brandName: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
  legalPerson: [{ required: true, message: "请选择父级类目", trigger: "blur" }],
  capital: [{ required: true, message: "请修改展示状态", trigger: "blur" }],
  industry: [{ required: true, message: "请上传分类图标", trigger: "blur" }],
  lisense: [{ required: true, message: "请上传分类图标", trigger: "blur" }],
  brandLogo: [{ required: true, message: "请上传分类图标", trigger: "blur" }],
  address: [{ required: true, message: "请上传分类图标", trigger: "change" }],
  intro: [{ required: true, message: "请上传分类图标", trigger: "blur" }],
  isShow: [{ required: true, message: "请上传分类图标", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(ruleForm);
      companyPost(ruleForm);
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));

// 初始化分类列表
const category = useCategory();

// 地图弹窗
const drawer = ref<boolean>(false);
</script>

<style scoped>
.editor {
  height: 300px;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #d8d8d8;
}
</style>
